import React, { useState } from 'react';
import { Card, Table, Select, Form, Button, Tabs, Progress, DatePicker, Tag, Space, Tooltip, Badge } from 'antd';
import { SyncOutlined, CheckCircleOutlined, ClockCircleOutlined, DownloadOutlined, BarChartOutlined, LineChartOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

const IndicatorCollection: React.FC = () => {
  const [loading, setLoading] = useState(false);
  
  // 模拟数据
  const collectionData = [
    {
      key: '1',
      code: 'HD-001',
      name: '分级诊疗转诊率',
      category: '医疗质量',
      frequency: '每月',
      dataSource: 'HIS系统',
      lastCollection: '2023-08-21',
      completeness: 100,
      status: 'complete',
      nextCollection: '2023-09-01'
    },
    {
      key: '2',
      code: 'HD-002',
      name: '下转患者比例',
      category: '医疗质量',
      frequency: '每月',
      dataSource: 'HIS系统',
      lastCollection: '2023-08-21',
      completeness: 100,
      status: 'complete',
      nextCollection: '2023-09-01'
    },
    {
      key: '3',
      code: 'HD-003',
      name: '基层诊疗率',
      category: '医疗质量',
      frequency: '每月',
      dataSource: 'HIS系统',
      lastCollection: '2023-08-21',
      completeness: 100,
      status: 'complete',
      nextCollection: '2023-09-01'
    },
    {
      key: '4',
      code: 'HD-004',
      name: '基层首诊率',
      category: '医疗效率',
      frequency: '每月',
      dataSource: '电子病历',
      lastCollection: '2023-08-15',
      completeness: 85,
      status: 'collecting',
      nextCollection: '2023-09-01'
    },
    {
      key: '5',
      code: 'HD-005',
      name: '双向转诊比例',
      category: '医疗效率',
      frequency: '每月',
      dataSource: 'HIS系统',
      lastCollection: '2023-08-10',
      completeness: 62,
      status: 'collecting',
      nextCollection: '2023-09-01'
    },
    {
      key: '6',
      code: 'HD-006',
      name: '慢病规范管理率',
      category: '医疗质量',
      frequency: '每季度',
      dataSource: '疾控系统',
      lastCollection: '2023-07-15',
      completeness: 100,
      status: 'complete',
      nextCollection: '2023-10-01'
    },
    {
      key: '7',
      code: 'HD-007',
      name: '基层用药规范率',
      category: '医疗质量',
      frequency: '每季度',
      dataSource: '处方系统',
      lastCollection: '2023-07-15',
      completeness: 100,
      status: 'complete',
      nextCollection: '2023-10-01'
    }
  ];
  
  // 表格列定义
  const columns = [
    {
      title: '指标编码',
      dataIndex: 'code',
      key: 'code',
      width: 100
    },
    {
      title: '指标名称',
      dataIndex: 'name',
      key: 'name',
      width: 150
    },
    {
      title: '类别',
      dataIndex: 'category',
      key: 'category',
      width: 100,
      filters: [
        { text: '医疗质量', value: '医疗质量' },
        { text: '医疗效率', value: '医疗效率' },
        { text: '患者体验', value: '患者体验' },
        { text: '费用控制', value: '费用控制' }
      ],
      onFilter: (value, record) => record.category === value
    },
    {
      title: '采集频率',
      dataIndex: 'frequency',
      key: 'frequency',
      width: 100
    },
    {
      title: '数据来源',
      dataIndex: 'dataSource',
      key: 'dataSource',
      width: 100
    },
    {
      title: '最近采集',
      dataIndex: 'lastCollection',
      key: 'lastCollection',
      width: 120,
      sorter: (a, b) => new Date(a.lastCollection) - new Date(b.lastCollection)
    },
    {
      title: '完成度',
      dataIndex: 'completeness',
      key: 'completeness',
      width: 120,
      render: (value, record) => (
        <Tooltip title={`已采集 ${value}%`}>
          <Progress 
            percent={value} 
            size="small" 
            status={record.status === 'collecting' ? 'active' : 'success'}
          />
        </Tooltip>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: (status) => {
        if (status === 'complete') {
          return <Badge status="success" text="采集完成" />;
        } else if (status === 'collecting') {
          return <Badge status="processing" text="采集中" />;
        } else {
          return <Badge status="default" text="未开始" />;
        }
      },
      filters: [
        { text: '采集完成', value: 'complete' },
        { text: '采集中', value: 'collecting' },
        { text: '未开始', value: 'notStarted' }
      ],
      onFilter: (value, record) => record.status === value
    },
    {
      title: '下次采集',
      dataIndex: 'nextCollection',
      key: 'nextCollection',
      width: 120
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_, record) => (
        <Space size="middle">
          {record.status === 'complete' ? (
            <>
              <Tooltip title="查看趋势">
                <Button type="link" size="small" icon={<LineChartOutlined />}>趋势</Button>
              </Tooltip>
              <Tooltip title="导出数据">
                <Button type="link" size="small" icon={<DownloadOutlined />}>导出</Button>
              </Tooltip>
            </>
          ) : record.status === 'collecting' ? (
            <>
              <Tooltip title="继续采集">
                <Button type="link" size="small" icon={<SyncOutlined />}>继续</Button>
              </Tooltip>
              <Tooltip title="查看已采集数据">
                <Button type="link" size="small" icon={<BarChartOutlined />}>查看</Button>
              </Tooltip>
            </>
          ) : (
            <Tooltip title="开始采集">
              <Button type="link" size="small" icon={<ClockCircleOutlined />}>开始</Button>
            </Tooltip>
          )}
        </Space>
      )
    }
  ];
  
  return (
    <div className="indicator-collection-container">
      <Card bordered={false} title="分级诊疗指标采集">
        <div className="filter-container">
          <Form layout="inline">
            <Form.Item label="指标类别">
              <Select defaultValue="all" style={{ width: 150 }}>
                <Option value="all">全部类别</Option>
                <Option value="quality">医疗质量</Option>
                <Option value="efficiency">医疗效率</Option>
                <Option value="experience">患者体验</Option>
                <Option value="cost">费用控制</Option>
              </Select>
            </Form.Item>
            <Form.Item label="采集状态">
              <Select defaultValue="all" style={{ width: 150 }}>
                <Option value="all">全部状态</Option>
                <Option value="complete">采集完成</Option>
                <Option value="collecting">采集中</Option>
                <Option value="notStarted">未开始</Option>
              </Select>
            </Form.Item>
            <Form.Item label="采集时间">
              <RangePicker />
            </Form.Item>
            <Form.Item>
              <Button type="primary">搜索</Button>
            </Form.Item>
            <Form.Item>
              <Button>重置</Button>
            </Form.Item>
          </Form>
        </div>
        
        <div className="statistics-bar">
          <div className="statistics-item">
            <span className="label">指标总数:</span>
            <span className="value">32</span>
          </div>
          <div className="statistics-item">
            <span className="label">今日需采集:</span>
            <span className="value highlight">5</span>
          </div>
          <div className="statistics-item">
            <span className="label">采集中:</span>
            <span className="value processing">2</span>
          </div>
          <div className="statistics-item">
            <span className="label">已完成:</span>
            <span className="value success">25</span>
          </div>
        </div>
        
        <Tabs defaultActiveKey="1">
          <TabPane tab="采集任务" key="1">
            <Table 
              columns={columns} 
              dataSource={collectionData} 
              loading={loading}
              pagination={{ 
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`
              }}
            />
          </TabPane>
          <TabPane tab="采集日历" key="2">
            <div className="chart-placeholder">
              指标采集日历将显示在这里
            </div>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default IndicatorCollection; 
